<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sample</title>
	<link rel="stylesheet" href="emojie.css">
	<script src="emojie.js"></script>
	<script src="emojie-iphone.js"></script>
</head>
<body>
	<h1>Emoji List</h1>
	<table border="1">
		<thead>
			<tr>
				<th>Origin Icon</th>
				<th>Icon</th>
				<th>Path</th>
			</tr>
		</thead>
		<tbody id="emoji-content">
			
		</tbody>
	</table>
	<script>
		var html = '';
		for(var i in emojie._emojis){
			if(emojie._emojis[i] === true){
				continue;
			}
			html += '<tr>';
			html += '<td>';
			html += i;
			html += '</td>';
			html += '<td>';
			html += '<img src="' + emojie._emojis[i].src + '">';
			html += '</td>';
			html += '<td>';
			html += emojie._emojis[i].src;
			html += '</td>';
			html += '</tr>';
		}
		document.getElementById('emoji-content').innerHTML = html;
	</script>

	<h1>Watch Test</h1>
	<div id="output-origin"></div>
	<div id="output"></div>
	<button onclick="startWatchTest()">Start</button>

	<script>
		function startWatchTest(){

			emojie.unwatch();
			emojie.watch(document.getElementById('output'));
			// emojie.watch(document.body);
			var timeout;
			var index = 0;
			var keys = [];
			for(var i in emojie._emojis){
				if(emojie._emojis[i] === true){
					continue;
				}
				keys.push(i);
			}
			var append = function(){
				var e = document.getElementById('output');
				var eOrigin = document.getElementById('output-origin');
				e.innerHTML += keys[index % keys.length];
				eOrigin.innerHTML += keys[index % keys.length];
				index ++;
				timeout = setTimeout(append, 1000);
			}

			append();

		}
	</script>
</body>
</html>